<template>
    <div class="container">
        <div class="page-head" :class="{'page-head-fixed': tabsRow}">
            <img v-if="fileSpace" class="width-16 height-16" :src="fileSpace + '/images/add-tag.png'"/>
            <div class="mar-l-8" @click="showDialog = true">新增标签</div>
        </div>
        <div :class="{'height-50': tabsRow}"></div>
        <div class="pull-refresh">
            <div class="content-list" v-if="!dataNone">
                <div class="list-row" v-for="(item,index) in listData" :key="index" @click="$pt.navigateTo({url: '/pages/home/customer-manage/tags-manage/tags-group/main?labelGroupId='+item.labelGroupId+'&labelName='+item.labelName+'&totalPrice='+item.totalPrice})">
                    <div class="inline-block">
                        <div class="group-left ">
                            <div class="group-name inline-block">{{item.labelName}}</div>
                            <div class="inline-block mar-l-10">({{item.customerNum}})</div>
                        </div>
                    </div>
                    <div class="inline-block">
                        <div class="group-right">
                            <span>消费总额：</span>
                            <span class="consumption">￥{{item.totalPrice}}</span>
                            <img v-if="fileSpace" class="inline-block width-6 height-12 mar-l-11" :src="fileSpace + '/images/access-icon.png'" alt="" mode="widthFix">
                        </div>
                    </div>
                </div>
                <base-line v-if="pullLoad.finished"  title='我是有底线滴'></base-line>
            </div>
            <div class="pad-10 mar-t-10 align-c" v-else>
                <img v-if="fileSpace" mode="widthFix" class="width-247.5 height-193.5 mar-t-30"
                    :src="fileSpace + '/images/customer-nodata.png'"/>
                <div class="pad-t-22 font-18 font-gray">暂无标签数据~</div>
                <div class="mar-t-20 perfect-shop">
                  <button @click="showDialog = true">立即添加</button>
                </div>
            </div>
        </div>
        <!-- <div style="height:500px;"></div> -->
        <div class="show-dialog">
            <van-dialog
                use-slot
                title="新增标签"
                :show="showDialog"
                show-cancel-button
                confirmButtonText="确定保存"
                @close="onCloseDialog"
                @confirm="onConfirmDialog"
            >
                <input type="text" placeholder="标签名称" v-model="labelName">
            </van-dialog>
        </div>
    </div>
</template>
<script>
import { tagsGroupPaging, veekrayLabelGroupSave } from '@/api/personal'
import baseLine from '@/components/BaseLine/index'
export default {
  components: { baseLine },
  data() {
    return {
      dataNone: false,
      showDialog: false,
      tabsRow: false,
      labelName: '',
      listData: [],
      listQuery: {
        memberId: '',
        currentPage: 1,
        size: 15
      },
      pullLoad: {
        loading: false,
        finished: false
      }
    }
  },
  onShow() {
    this.listQuery.currentPage = 1
    this.listData = []
    this.pageInit()
  },
  onReachBottom() {
    // 触底刷新
    if (!this.pullLoad.finished) {
      this.pageInit()
    }
  },
  onPageScroll: function(e) {
    const query = this.$pt.createSelectorQuery()
    query.select('.pull-refresh').boundingClientRect()
    // query.selectViewport().scrollOffset()
    query.exec(res => {
      if (res[0].top <= -10) {
        this.tabsRow = true
      } else {
        this.tabsRow = false
      }
    })
  },
  methods: {
    pageInit() {
      this.listQuery.memberId = this.getCustomerId
      tagsGroupPaging(this.listQuery).then(response => {
        this.dataNone = false
        if (response.isError) return
        response.data.records.forEach(element => {
          this.listData.push(element)
        })
        this.listQuery.currentPage++
        if (this.listData.length === 0 || this.listData.length >= response.data.total) {
          this.pullLoad.finished = true
        }
        if (response.data.records.length === 0) {
          this.dataNone = true
        }
      }).catch({})
    },
    onClose(event) {
      const { position, instance } = event.detail
      switch (position) {
        case 'left':
        case 'cell':
          instance.close()
          break
        case 'right':
          instance.close()
          break
      }
    },
    onConfirmDialog() {
      let params = {
        labelName: this.labelName,
        memberId: this.getCustomerId
      }
      veekrayLabelGroupSave(params).then(response => {
        if (response.isError) return
        this.$utils.showToast({ title: response.msg })
        setTimeout(() => {
          this.$pt.navigateTo({url: '/pages/home/customer-manage/tags-manage/tags-group/main?labelGroupId=' + response.data + '&labelName=' + this.labelName})
        }, 1500)
      }).catch({})
    },
    onCloseDialog() {
      this.showDialog = false
    }
  }
}
</script>
<style lang="less" scoped>
.container{
  background: white;
  min-height: calc(100vh);
}
.page-head{
    display: flex;
    justify-content: left;
    align-items: center;
    padding: 0 15px;
    height: 49px;
    width: calc(100% - 30px);
    border-bottom: 1px solid #ededed;
    color: #ec6700;
    font-size: 15px;
    background: white;
}
.page-head-fixed{
    position: fixed;
    top: 0;
    left: 0;
    box-shadow: 0px 2px 6px #c5c5c5;
}
.content-list{
    .list-row{
        padding: 0 15px;
        height: 49px;
        border-bottom: 1px solid #ededed;
        .inline-block{
            display: inline-block;
        }
        .group-left{
            width: 190px;
            height: 49px;
            line-height: 49px;
            font-size: 15px;
            color: #333333;
            .group-name{
                max-width: 140px;
                overflow:hidden;
                vertical-align:top;
                text-overflow:ellipsis;
                -webkit-line-clamp:1;
                -webkit-box-orient:vertical;
                // word-break:break-word;
                white-space: nowrap;
            }
        }  
        .group-right{
            display: flex;
            justify-content: flex-end;
            align-items: center;
            font-size: 12px;
            width: 150px;
            height: 49px;
            line-height: 49px;
            .consumption{
                color: #fd452d;
            }
        }
    }
}
// .show-dialog{
//     /deep/ .van-dialog{
//         width: 300px;
//     }
//     /deep/ .van-popup{
//         top: 176px;
//     }
//     /deep/ .van-dialog__header{
//         font-size: 18px;
//         color: #333333;
//         font-weight: bold;
//     }
//     /deep/ .dialog-index--van-dialog__confirm{
//         background: #f8c400 !important;
//         color: #333333 !important;
//     }
//     /deep/ .van-dialog__confirm{
//         color: #333333 !important;
//     }
//     /deep/ .van-hairline--top::after{
//         border-color: #c5c5c5;
//     }
//     /deep/ .van-hairline--right::after{
//         border-color: #c5c5c5;
//     }
//     input{
//         padding: 18px 12px!important;
//         border: .5px solid #c5c5c5;
//         width: 80%;
//         margin: 22px auto!important;
//         line-height: 1!important;
//         height: unset!important;
//         min-height: unset!important;
//         border-radius: 3px;
//         font-size: 15px!important;
//         color: #999999;
//     }
// }
</style>
